<template>
  <div class="boxs">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca">确认账款信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组174.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca">上传申请材料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组178.png" alt="" />
          </div>
          <span style="color: #627dca">绑定银行账户</span>
        </li>
      </ul>
    </div>
    <div class="f2" v-loading="loading">
      <ul class="ul">
        <li>
          <el-form ref="ruleForm1" :model="addform" label-width="120px" :rules="rules">
            <el-form-item label="开户企业名称" prop="a">
              <el-input v-model="addform.a" @blur="a"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm2" :model="addform" label-width="120px" :rules="rules">
            <el-form-item label="开户地址" prop="b">
              <el-input v-model="addform.b" @blur="a"></el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm3" :model="addform" label-width="120px" :rules="rules">
            <el-form-item label="开户银行" prop="c">
              <el-input v-model="addform.c" @blur="a"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm4" :model="addform" label-width="120px" :rules="rules">
            <el-form-item label="开户银行支行" prop="d">
              <el-input v-model="addform.d" @blur="a"></el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm5" :model="addform" label-width="120px" :rules="rules">
            <el-form-item label="开户行联行号" prop="e">
              <el-input v-model="addform.e" @blur="a"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm6" :model="addform" label-width="120px" :rules="rules">
            <el-form-item label="银行卡号" prop="f">
              <el-input v-model="addform.f" @blur="a"></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          :src="require(`@/assets/shangpiao/组${radio ? '38' : '39'}.png`)"
          alt=""
        />
        <span> 阅读并同意 </span>
        <!-- href="http://operate.thunlink.cn/protocol/4 企业授权协议-商驿/4
        企业授权协议-商驿.html" target="_back" -->
        <a
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          >《企业授权协议》、</a
        >
        <!-- href="http://operate.thunlink.cn/protocol/9 技术服务协议-商链驿/9 技术服务协议-商链驿.html"
          target="_back" -->
        <a
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          >《技术服务协议》</a
        >
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <div class="btn btn1" @click="goLast()">上一步</div>
        <el-tooltip placement="top" v-if="!btn">
          <div slot="content">请勾选授权协议<br />确认填写的信息是否完整</div>
          <button
            class="btn btn3"
            v-bind:class="{
              active: btn & radio,
              actives: submitMessage == '提交中'
            }"
            @click="submit()"
          >
            {{ submitMessage }}
          </button>
        </el-tooltip>
        <button
          v-else
          class="btn btn3"
          v-bind:class="{
            active: btn & radio,
            actives: submitMessage == '提交中'
          }"
          @click="submit()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      :visible.sync="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <template v-if="list">
          <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in list" :key="item.url" :label="item.name" :name="item.names">
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          v-if="contractStatuss"
          :disabled="isLock"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button v-else :disabled="isLock" class="dialog-footer-bnt btn2" @click="sign">
          去签署
        </button>
      </div>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      class="hint"
      :closeOnClickModal="false"
      title="合同签署"
      :visible.sync="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>
          签署短信已发送至经办人手机{{ operateTel | getPhone }}、法定代表人手机{{
            officertel | getPhone
          }}，请点击短信签署链接完成签署操作。
        </p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          style="background: #fff; color: #3f6ef2"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button
          v-bind:class="{ actives: submitMessage == '提交中' }"
          class="dialog-footer-bnt btn2"
          @click="submit()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  AddBusinessBankInfo,
  busnessSubmit,
  Contracts,
  Contract,
  ContractContract,
  createContractReview
} from '@/utils'
export default {
  data() {
    return {
      submitMessage: '提交',
      contractStatuss: true, //合同签署状态
      loading: false,
      QYSQreportUrl: '',
      JSFWreportUrl: '',
      flowId: '',
      isLock: false,
      activeName: 'first', //标签页默认
      radio: false, //企业授权服务状态变量
      btn: false, //提交按钮是否可用状态变量
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      id: '', // 申请id
      procedureid: '', //产品id
      officertel: '', //法人手机号
      operateTel: '', //经办人手机号
      list: null,
      // 合同签署数据
      contract: {
        a: '',
        applyid: '',
        entname: '',
        FRaccountid: '',
        inputdate: '',
        JBRaccountid: '',
        licenseno: '',
        mainindname: '',
        officer: '',
        officertel: '',
        ORGaccountid: '',
        productcode: '',
        radio: '0.2',
        ticketadder: '',
        ticketbank: '',
        ticketbankno: '',
        tickethead: '',
        ticketno: '',
        tickettel: '',
        step: 'apply'
      },
      // 用户填写资料表格
      addform: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: ''
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  // 过滤器
  filters: {
    // 手机号脱敏
    getPhone: function (value) {
      if (!value) return value
      value = value.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
      return value
    }
  },

  // 生命周期方法
  mounted() {
    document.documentElement.scrollTop = 0
    // 从路由地址中获取产品ID,保存到状态变量中
    this.id = localStorage.getItem('applyid')
    this.contract.applyid = localStorage.getItem('applyid')
    this.procedureid = localStorage.getItem('id')
    this.contract.productcode = localStorage.getItem('productcode')
  },
  methods: {
    // 表单验证
    a() {
      this.submitBtns()
    },
    aaaa() {
      this.radio = true
      this.submitBtns()
      this.hintVisible = false
      this.showAgreementVisible = false
    },
    //
    goLast() {
      this.$router.go(-1)
    },
    // 提交
    async submit() {
      if (this.submitMessage == '提交中') return
      if (
        this.addform.a != '' &&
        this.addform.b != '' &&
        this.addform.c != '' &&
        this.addform.d != '' &&
        this.addform.e != '' &&
        this.addform.f != '' &&
        this.radio
      ) {
        this.submitMessage = '提交中'
        let params = {
          bankentname: this.addform.a,
          bankaddress: this.addform.b,
          bankaccounts: this.addform.c,
          branch: this.addform.d,
          linenumber: this.addform.e,
          cardno: this.addform.f,
          applyid: this.id
        }
        let data = await AddBusinessBankInfo(params)
        if (data.code == 100) {
          let submit = await busnessSubmit(this.id)
          if (submit.code == 100) {
            this.$router.push(`/sjghdApplication4`)
            this.hintVisible = false
            setTimeout(() => {
              this.submitMessage = '提交'
            }, 3000)
            return
          } else {
            this.$Message.success('申请提交失败')
            this.submitMessage = '提交'
          }
        } else {
          this.$Message.success('申请提交失败')
          this.submitMessage = '提交'
        }
      }
      return
    },
    async submitBtn(ruleForm1, ruleForm2, ruleForm3, ruleForm4, ruleForm5, ruleForm6) {
      this.$refs[ruleForm1].validate(valid => {})
      this.$refs[ruleForm2].validate(valid => {})
      this.$refs[ruleForm3].validate(valid => {})
      this.$refs[ruleForm4].validate(valid => {})
      this.$refs[ruleForm5].validate(valid => {})
      this.$refs[ruleForm6].validate(valid => {})
      if (this.radio) return
      if (
        this.addform.a == '' ||
        this.addform.b == '' ||
        this.addform.c == '' ||
        this.addform.d == '' ||
        this.addform.e == '' ||
        this.addform.f == ''
      ) {
        return this.$Message.error('请填写信息')
      }

      let parameter = {
        productcode: this.contract.productcode,
        entname: sessionStorage.getItem('entname')
      }
      this.loading = true
      this.showAgreementVisible = true
      let data = await Contracts(parameter)
      if (data.code == 10000) {
        this.$Message.error('登录已过期，请重新登录')
        this.$router.push('/login')
        sessionStorage.clear()
        return
      }
      if (data.code != 100) {
        this.$Message.error('系统异常，请您稍后再试')
        this.loading = false
        return
      }
      this.officertel = data.data.ent.fincerttel
      this.operatetel = data.data.ent.operateTel
      this.contract.entname = data.data.ent.entname
      this.contract.FRaccountid = data.data.ent.fraccountid
      this.contract.inputdate = data.data.ent.inputdate
      this.contract.JBRaccountid = data.data.ent.jbRaccountid
      this.contract.licenseno = data.data.ent.licenseno
      this.contract.mainindname = data.data.ent.mainindname
      this.contract.officer = data.data.ent.operatename
      this.contract.officertel = data.data.ent.fincerttel
      this.contract.ORGaccountid = data.data.ent.qyaccountid
      this.contract.radio = data.data.radio
      let GetcreateContractReview = await createContractReview(this.contract)
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        } else {
          this.list = GetcreateContractReview.data.data.file
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        }
      } else {
        this.showAgreementVisible = false
        this.$Message.error('系统异常，请您稍后再试')
      }
      if (
        this.addform.a != '' &&
        this.addform.b != '' &&
        this.addform.c != '' &&
        this.addform.d != '' &&
        this.addform.e != '' &&
        this.addform.f != ''
      ) {
        this.btn = true
      } else {
        this.btn = false
      }
    },
    // 点击去签署按钮
    async sign() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      this.loading = true
      let data = await Contract(this.contract)
      if (data.code == 100) {
        this.loading = false
        this.radio = true
        this.showAgreementVisible = false
        this.hintVisible = true
        this.flowId = data.data.flowId
        this.officertel = sessionStorage.getItem('userPhone')
        this.submitBtns()
      }
    },
    submitBtns() {
      if (
        this.addform.a != '' &&
        this.addform.b != '' &&
        this.addform.c != '' &&
        this.addform.d != '' &&
        this.addform.e != '' &&
        this.addform.f != '' &&
        this.radio
      ) {
        this.btn = true
      } else {
        this.btn = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.2083rem;
          }
          .icon2 {
            height: 0.0104rem;
            margin: 0 0.0833rem;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999;
          margin-left: -0.1979rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .unit {
    position: relative;
    width: 90%;
    height: 0.1042rem;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 0.0729rem;
    color: #606266;
    p {
      position: absolute;

      right: 5.5%;
      top: -0.0156rem;
    }
  }
  .f2 {
    overflow: auto;
    margin-top: 5%;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;

      li {
        width: 90%;
        margin-bottom: 0.0938rem;
        height: 0.2604rem;
        display: flex;
        justify-content: center;
        .message {
          margin-top: -0.0573rem;
          font-size: 0.0625rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
  }
  .f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }
  .f3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0.2865rem;
    width: 1.4323rem;
    height: 0.1771rem;
    background: #3f6ef2;
    border-radius: 0.0208rem;
    font-size: 0.0938rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.1302rem;
    text-align: center;
    margin-top: 0.0521rem;
    user-select: none;
    span {
      font-size: 0.0729rem;
      color: #666;
      margin-left: 0.0365rem;
    }
    img {
      width: 0.0781rem;
      height: 0.0781rem;
      cursor: pointer;
    }
    a {
      cursor: pointer;
      font-size: 0.0729rem;
      color: #3f6ef2;
    }
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.2604rem;
    margin: 0.026rem 0 0.026rem 0;

    .btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.9375rem;
      height: 0.1771rem;
      background: #3f6ef2;
      border-radius: 0.0203rem;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 0.1563rem;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
  // 弹出框
  .dialog-center {
    box-sizing: border-box;
    padding: 0 0.026rem;
    display: flex;
    justify-content: center;
    width: 100%;
    // background-color: #f00;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 520px;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 520px;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 660px;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 600px;
        height: 460px;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 600px;
        height: 460px;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 760px;
        height: 580px;
      }

      background-color: #fff;

      h1 {
        font-size: 18px;
      }
    }
  }
  // 弹窗按钮
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 0.6302rem;
      height: 0.1615rem;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 0.0208rem;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0px;
      }
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.1042rem;
    font-size: 0.0885rem;
  }
}
::v-deep .hint .el-dialog {
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 52%;
  }
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 50%;
  }
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 49%;
  }
}
::v-deep .hint .el-dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.026rem 0.1042rem;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 300px;
  @media only screen and (min-width: 1px) and (max-width: 910px) {
    width: 100px;
  }
  @media only screen and (min-width: 911px) and (max-width: 999px) {
    width: 150px;
  }
  @media only screen and (min-width: 1000px) and (max-width: 1150px) {
    width: 200px;
  }
  @media only screen and (min-width: 1151px) and (max-width: 1250px) {
    width: 250px;
  }
  height: 0.2031rem;
  font-size: 0.0781rem;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
}
::v-deep .el-dialog__header {
  padding: 0;
}
</style>
<style lang="scss">
// .el-dialog--center .el-dialog__body {
//   padding: 0px 24px 30px;
// }

// .el-dialog__header {
//   border-bottom: 0px;
// }
</style>
